<template>
  <div class="login">
    <x-header title="客官且慢，还差一步" :left-options="{backText:''}" class='whiteHeader'></x-header>
    <div class="userWeiX">
      <img src="../../assets/image/group/userLogo.png" v-if='!srcImg' alt="" />
      <img :src="srcImg" v-if='srcImg' alt="" />
      <h2 class="userWXName">
        {{userN}}
      </h2>
    </div>
    <div class="modifyPhone">
      <div class="itemP border-bottom">
        <label>手机号</label>
        <input type="text" placeholder="请输入手机号码" v-model="Phone"/>
        <button @click="getCode" v-text="GetCode"></button>
      </div>
      <div class="itemC border-bottom">
        <label>验证码</label>
        <input type="text" placeholder="请输入获取的验证码" v-model="Code"/>
      </div>
      <div class="modify" @click="modifyPhone">
        好了，我要下单了
      </div>
    </div>
  </div>
</template>
<script>
import { XHeader } from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"login",
  // 数据
  data(){
    return{
      'Phone':"",//手机号码
      'GetCode':"获取验证码",//手机号码
      'Code':"", //输入的验证码
      'codeKey': true, // 验证码开关
      'srcImg':'' ,//头像
      'userN':''  //用户昵称

    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.srcImg=getCookie('headerImg');
    this.userN=getCookie('userN');
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    //获取验证码
    getCode(){
      let i=60;
      let that=this;
      let timer = null;
      if ( !that.codeKey ) return;
      if(this.Phone==""){
            this.$vux.alert.show({
      			  title: '提示',
      			  content: '手机号不能为空',
      			  onHide () {
      			  }
      			})
          }else if(!/^1[34578]\d{9}$/g.test(this.Phone)){
            this.$vux.alert.show({
      			  title: '提示',
      			  content: '输入的手机号码不合格',
      			  onHide () {
      			  }
      			})
          }else{
            this.$fetchPost('/UserWeb/sendVerifyCode.action',{PHONE:this.Phone}).then(res=>{
              if(res.STATUS_CODE==1){
                that.codeKey = false;
                timer = setInterval(function(){
                  if (i <= 0) {
                    clearInterval(timer);
                    that.GetCode = '获取验证码';
                    that.codeKey = true;
                    return;
                  }
                  i--;
                  that.GetCode=i+"s后可重发";
                },1000);
              }
            },err=>{})
            //请求获取验证码接口
          }
    },
    //用户微信信息中没有手机号码时，绑定手机号码
    modifyPhone(){
      let that=this;
      if(this.Code==""){
          this.$vux.alert.show({
    			  title: '提示',
    			  content: '请输入验证码',
    			  onHide () {
    			  }
    			})
        }else{
          //绑定手机号码接口
          let unionid=getCookie('_unionidpo_');
          this.$fetchPost('/UserWeb/signIn.action',{UNIONID:unionid,USERNAME:this.Phone,VERIFY_CODE:this.Code,'LOGIN_SYSTEM':'web'}).then(res=>{
            if(res.STATUS_CODE==1){
              setCookie('loginkey',res.USER.USER_ID);
              setCookie('name',res.USER.USERNAME);
              setCookie('userName',res.USER.USERNAME);
              setCookie('userAvatar',res.USER.AVATAR);
              setCookie('CAR_ID',res.USER.CAR_ID);
              setCookie('INV_CODE',res.INV_CODE);
              setCookie('INV_URL',res.INV_URL);
              that.$router.go(-1);
              /*this.$vux.alert.show({
      				  title: '提示',
      				  content: '绑定成功',
      				  onHide () {
                  that.$router.go(-1);
      				  }
      				})*/
            }else if(res.body.STATUS_CODE==2){
              this.$vux.alert.show({
      				  title: '提示',
      				  content: '验证码错误',
      				  onHide () {
      				  }
      				})
            }
          })
        }
    }

  },
  // 子组件
  components:{
  	XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.login{
  width: 7.5rem;
  height: 100%;
  .userWeiX{
    padding: 0.7rem;
    img{
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 100%;
      margin-bottom: 0.05rem;
    }
    .userWXName{
      font-size: 0.35rem;
    }
  }
  .modifyPhone{
    border-top:1px solid #ccc;

    margin-top: 0.3rem;
    .itemP{
      padding: 0rem 0 0 0.2rem;
      background: #fff;
      height: 1rem;
      line-height: 1rem;
      display: flex;
      /* border-bottom:1px solid #ccc; */
      input{
        width: 100%;
      }
      button{
        float: right;
        min-width: 30%;
        background: #ec2121;
        width: 1.2rem;
        height: .8rem;
        margin: .1rem 0.15rem;
        border-radius: .08rem;
      }
      label{
        min-width: 16%;
      }
    }
    input{
      border:0;
      margin-left: 0.2rem;
      height: 0.98rem;
      padding: 0;
      outline:medium;
      font-size: 0.3rem;
    }
    button{
      background: #ec2121;
      border:0;
      color: #fff;
      padding: 0 0.2rem;
      font-size: 0.3rem;
    }
    label{
      font-size: 0.35rem;
      line-height: 1rem;
    }
    .itemC{
      display: flex;
      height: 1rem;
      background: #fff;
      line-height: 1rem;
      /* border-bottom:1px solid #ccc; */
      padding: 0rem 0.2rem;
      label{
        min-width: 16%;
      }
    }
    .modify{
      width: 90%;
      margin:0.7rem auto;
      font-size: 0.3rem;
      background: #ec2121;
      color: #fff;
      height: 0.9rem;
      line-height: 0.9rem;
      border:1px solid #ccc;
      border-radius: 0.1rem;
      
    }
    .activeButton{
      background: #1967d6;
    }
  }
}
</style>